<template>
    <div class="modal fade" id="add_equip" tabindex="-1" role="dialog"
         aria-labelledby="add_equip">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-body">
                    <div class="batchsearch_box">
                        <div class="g-form-line">
                            <div class="batchsearch_left">
                                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                    <span aria-hidden="true">
                                        <img src="../../assets/images/home_image/close.png" alt="" class="closeBtn">
                                    </span>
                                </button>
                                <p>添加设备</p>
                            </div>
                            <div class="batchsearch_right">
                                <p class="text_1">设备号:</p>
                                <textarea type="text" class="text_2" v-model="imeis"></textarea>
                                <p class="text_3">多个设备号以英文逗号分隔</p>
                                <div class="modal-footer">
                                    <button type="button" class="btn btn-success left_btn" @click="confirm">确定</button>
                                    <button type="button" class="btn btn-success right_btn export" data-dismiss="modal">
                                        取消
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        props: {
            dealerId: [Number, String]
        },
        data () {
            return {
                imeis: ''
            }
        },
        methods: {
            confirm () {
                if (this.imeis === '') {
                    this.$store.commit('showAlert', {error: this.$msgDictionary.imeiError.imeiEmpty})
                    return
                }
                let imeiArr = [...new Set(this.imeis.split(','))] // 去重
                if (imeiArr[imeiArr.length - 1] === '') {
                    imeiArr.splice(imeiArr.length - 1, 1)
                }
                let reg = /(^[0-9a-zA-Z]{10,}$)/
                for (let i = 0; i < imeiArr.length; i++) {
                    if (!reg.test(imeiArr[i].trim())) {
                        this.$store.commit('showAlert', {error: this.$msgDictionary.imeiError.imeiFormat})
                        return
                    }
                    imeiArr[i] = imeiArr[i].trim()
                }
                let params = {
                    imeis: imeiArr.join(','),
                    superiorId: 0,
                    dealerId: this.dealerId
                }
                this.$ajax
                    .equip
                    .addEquips(params)
                    .then((res) => {
                        let result = res.data
                        if (result.code === 200) {
                            this.$store.commit('showAlert', {success: this.$msgDictionary.addSuc})
                            this.$emit('refreshMenu')
                            let timer = setTimeout(() => {
                                clearTimeout(timer)
                                let time = setTimeout(() => {
                                    clearTimeout(time)
                                    $('#add_equip').modal('hide')
                                }, 1000)
                                $('#msgModal').modal('hide')
                            }, 1000)
                        } else if (result.code === 408) {
                            this.$store.commit('showAlert', {error: this.$msgDictionary.loginGetaway})
                            let timer = setTimeout(() => {
                                clearTimeout(timer)
                                let time = setTimeout(() => {
                                    clearTimeout(time)
                                    $('#add_equip').modal('hide')
                                    this.$router.push('/login')
                                }, 1000)
                                $('#msgModal').modal('hide')
                            }, 1000)
                        } else if (result.code === 701) {
                            this.$store.commit('showAlert', {error: this.$msgDictionary.imeiError.imeiExist})
                        } else {
                            this.$store.commit('showAlert', {error: result.msg})
                        }
                    }, () => {
                        this.$store.commit('showAlert', {error: this.$msgDictionary.serviceException})
                    })
            }
        }
    }
</script>


<style scoped>

    .g-form-line {
        float: left;
        padding: 0;
        width: 100%;
        height: 100%;
        overflow: scroll;
        overflow-x: hidden;
        overflow-y: hidden;
        text-align: center;
    }

    .batchsearch_left {
        position: relative;
        width: 180px;
        height: 362px;
        background: #263238;
        float: left;
        color: rgb(23, 210, 156);
        text-align: center;
        line-height: 362px;
    }

    .batchsearch_left p {
        font-size: 16px;
    }

    .modal-content {
        width: 530px;
        height: 362px;
        padding: 0;
        margin: 0;
    }

    .modal-body {
        width: 530px;
        height: 362px;
        padding: 0;
        margin: 0;
    }

    .batchsearch_box {
        width: 530px;
        height: 362px;
        padding: 0;
        margin: 0;
    }

    .closeBtn {
        position: absolute;
        left: 15px;
        top: 10px;
    }

    .batchsearch_right {
        position: relative;
        width: 354px;
        height: 362px;
        margin-left: 190px;
    }

    .batchsearch_right .text_1 {
        position: absolute;
        top: 20px;
        left: 40px;
        color: rgb(153, 153, 153);
    }

    .batchsearch_right .text_2 {
        position: absolute;
        top: 50px;
        left: 40px;
        width: 253px;
        height: 195px;
    }

    .batchsearch_right .text_3 {
        position: absolute;
        top: 254px;
        left: 43px;
        color: rgb(213, 76, 76);
    }

    .modal .modal-footer .btn-success.left_btn {
        position: absolute;
        top: 300px;
        left: 30px;
        margin-left: 16px;
    }

    .modal-footer .right_btn {
        position: absolute;
        top: 300px;
        left: 160px;
        margin-left: 28px;
    }

</style>
